<!DOCTYPE html>
<html>
<head>
	<title>Puncher</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="css/base.css" />
	<style>
	#welcome {
		background:url(images/bg001.jpg) no-repeat center center;
	}

	#check-list li{
		text-align:center;
		line-height:30px;
	}
	#check-list a {
		text-decoration:none;
		font-family: Helvetica,Arial,sans-serif;
		text-shadow: 0 1px 0 white;
	}
	#check-list a:link {
		color:green;
	}

	#wrapper {
		position:absolute; 
		z-index:1;
		top:45px; bottom:48px; left:0;
		width:100%;
		overflow:auto;
	}
	#scroller {
		position:absolute;
		z-index:1;
	/*	-webkit-touch-callout:none;*/
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		width:100%;
		padding:0;
	}

	#enter {
		height:50px;
		width:120px;
		line-height:32px;
	}
	</style>
</head>
<body>

<!-- welcome page -->
<div data-role="page" id="welcome">
	<div data-role="header" data-position="fixed" data-theme="b">
		<h1>Puncher</h1>
		<a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="#" data-icon="back" data-iconpos="notext" data-rel="back">Back</a>
	</div>
	<div data-role="content">
		<p><a href="#main" data-role="button" data-theme="b" data-transition="slide" data-icon="arrow-r" data-iconpos="right" id="enter">Enter</a></p>	
	</div>
</div>

<!-- main page -->
<div data-role="page" data-theme="c" id="main">
	<div data-role="header" data-position="fixed" data-theme="b">
		<h1>Puncher</h1>
		<a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="#" data-icon="back" data-iconpos="notext" data-rel="back">Back</a>
	</div>
	<div data-role="content" id="submit-content">
		<p><a href="#popup" data-icon="arrow-r" data-iconpos="right" data-role="button" data-rel="dialog" data-transition="pop" id="check-in">Check In</a></p>
		<p><a href="#check" data-icon="arrow-r" data-iconpos="right" data-role="button" data-transition="slide">Check History</a></p>
	</div>
	<div data-role="footer" data-position="fixed" data-theme="b">
		<p style="text-align:center">Hongbo Li &copy; 2012 Puncher</p>
	</div>
</div>


<!-- check history page -->
<div data-role="page" data-theme="c" id="check">
	<div data-role="header" data-position="fixed" data-theme="b">
		<h1>Puncher</h1>
		<a href="#welcome" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="index.html" data-icon="back" data-iconpos="notext" data-rel="back">Back</a>
	</div>
	<div id="wrapper">
		<div id="scroller">
		<div data-role="content">
			<p><ul data-role="listview" data-filter="true" data-filter-placeholder="Search check time..." data-inset="true" id="check-list">
			</ul></p>
			<p><a href="#" data-role="button" id="clear">Clear History</a></p>
		</div>
		</div>
	</div>
	<div data-role="footer" data-position="fixed" data-theme="b">
		<p style="text-align:center">Hongbo Li &copy; 2012 Puncher</p>
	</div>
</div>

<!-- check in popup -->
<div data-role="page" data-theme="b" id="popup">
	<div data-role="header" data-theme="b">
		<h1>Check Time</h1>
	</div>
	<div data-role="content" data-theme="c" style="text-align:center">	
		<h2><span id="check-time"></span></h2>
		<p><a href="#check" data-icon="arrow-r" data-iconpos="right" data-role="button" data-transition="slide">Check History</a></p>
	</div>
	<div data-role="footer" data-theme="b">
		<h4></h4>
	</div>

</div>
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/jquery.mobile-1.1.0.min.js"></script>
	<script src="js/iscroll.js"></script>
	<script src="js/core.js"></script>
<script>
(function(){
	// get current time
	function getCurTime(dayCount) {
		function two(v){
			return v>9?v:'0'+v;
		}
		var d = new Date();
		d.setDate(d.getDate() + (!!dayCount ? dayCount : 0));
		var year = d.getFullYear();
		var month = d.getMonth() + 1 > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1);
		var day = two(d.getDate())
		var hour = two(d.getHours());
		var minuts = two(d.getMinutes());
		var seconds = two(d.getSeconds());
		var time = year + "-" + month + "-" + day + " " + hour + ":" + minuts + ":" + seconds;
		return time;
	}
	// save time data
	function save(time){
		var times=localStorage["times"];
		times=times?JSON.parse(times):[];
		times.push(time);
		times=JSON.stringify(times);
		localStorage["times"]=times;
	}
	// record time
	$(document).delegate("#popup", "pageshow", function() {
		var time=getCurTime();
		save(time);
		$("#check-time").html(time);
	});

	// welcome page
	$(document).delegate("#welcome", "pageinit", function() {
		var mt=$("#welcome").height()-$("#enter").height();
		var ml=$("#welcome").width()-$("#enter").width();
		$("#enter").css({
			"margin-top":mt/2,
			"margin-left":ml/2
		})
	});

	// clear data
	$(document).delegate("#check", "pageinit", function() {
		$("#clear").click(function(){
			localStorage.clear();
			$("#check-list").empty();
		});
	});

	// show data
	$(document).delegate("#check", "pageshow", function() {
		$("#check-list").empty();
		var times=localStorage["times"];
		if(!times)
			return;
		times=JSON.parse(times);
		times.reverse();
		for(var i=0;i<times.length;i++){
			var t=times[i];
			var ft=t.replace(/-/g,"");
			$("#check-list").append("<li data-filtertext='"+ft+"'><a href='#' class='item'>"+times[i]+"</a></li>");
		}
		myScroll = new iScroll('wrapper',{hideScrollbar:true});
	});
})();
</script>
</body>
</html>